<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
                <el-breadcrumb-item>汽车品牌</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="roleFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="roleFormData.brandName" placeholder="请输入品牌名"></el-input>
                </el-form-item>
                <!--<el-form-item >-->
                <!--<el-input v-model="roleFormData.carPlate" placeholder="请输车牌号"></el-input>-->
                <!--</el-form-item>-->

                <el-form-item>
                    <el-button type="primary"  @click="initTable">查询</el-button>
                    <el-button type="primary" @click="add">添加</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <!--<el-button type="primary" @click="add">添加</el-button>-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="#"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="brandName"
                            label="品牌名">
                    </el-table-column>
                    <el-table-column
                            prop="firstLetter"
                            label="品牌首字母">
                    </el-table-column>
                    <el-table-column
                            prop="sort"
                            label="排序等级">
                    </el-table-column>
                    <el-table-column
                            prop="factoryStatus"
                            label="是否是品牌制造商">
                        <template slot-scope="scope">
                            <p v-if="tableData[scope.$index].factoryStatus==1">是</p>
                            <p v-if="tableData[scope.$index].factoryStatus==0">不是</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="showStatus"
                            label="品牌状态">
                        <template slot-scope="scope">
                            <p v-if="tableData[scope.$index].showStatus==0">无效</p>
                            <p v-if="tableData[scope.$index].showStatus==1">有效</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="brandStory"
                            label="品牌故事">
                    </el-table-column>
                    <el-table-column
                            prop="logo"
                            label="品牌logo">
                        <template   slot-scope="scope">
                            <img :src="scope.row.logo"  min-width="70" height="80" />
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="bigPic"
                            label="专区大图">
                        <template   slot-scope="scope">
                            <img :src="scope.row.bigPic"  min-width="70" height="70" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120px" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" @click="upda(scope.row)" circle></el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="del(scope.row.id)" circle></el-button>
                        </template>
                    </el-table-column >
                </el-table>
                <!--分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>
            <!--分配菜单的弹出框-->
            <el-dialog title="汽车信息" :visible.sync="dialogFormVisible" width="33%" style="text-align: center">
                <el-form :model="form" ref="form">
                    <el-form-item label="Id" v-show="false">
                        <el-input v-model="form.id" autocomplete="off" style="width: 75%"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌名">
                        <el-input v-model="form.brandName" autocomplete="off" style="width: 75%"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌首字母">
                        <el-input v-model="form.firstLetter" autocomplete="off" style="width: 75%"></el-input>
                    </el-form-item>
                    <el-form-item label="排序等级">
                        <el-input v-model="form.sort" autocomplete="off" style="width: 75%"></el-input>
                    </el-form-item>
                    <el-form-item label="是否是品牌制造商">
                        <el-select v-model="form.factoryStatus" autocomplete="off" placeholder="请选择活动区域" style="width: 75%">
                            <el-option label="是"    :value="1"></el-option>
                            <el-option label="不是"   :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="品牌状态">
                        <el-select v-model="form.showStatus" autocomplete="off" placeholder="请选择活动区域" style="width: 75%">
                            <el-option label="有效"    :value="1"></el-option>
                            <el-option label="无效"   :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="品牌故事">
                        <el-input v-model="form.brandStory" autocomplete="off" style="width: 75%"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌log">
                        <el-upload
                                class="avatar-uploader"
                                action="http://localhost:80/lease/brand/upload"
                                :headers="headers"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrlLog" :src="imageUrlLog" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="专区大图">
                        <el-upload
                                class="avatar-uploader"
                                action="http://localhost:80/lease/brand/upload"
                                :headers="headers"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess02"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrlBig" :src="imageUrlBig" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addOrupda">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "CarConfig",
        data(){
            return {
                roleFormData:{},
                tableData:[],
                currentPage:1,
                pageSize:5,
                total:0,
                form:{

                },
                dialogFormVisible:false,
                labelPosition:'left',
                show:false,
                imageUrlLog:"",
                imageUrlBig:"",
                headers:{
                    token:sessionStorage.getItem("token")
                }
            }
        },
        created() {
            this.initTable();
        },
        methods:{
            handleAvatarSuccess(res, file) {
                this.imageUrlLog =res.result.path;
            },
            handleAvatarSuccess02(res, file) {
                this.imageUrlBig =res.result.path;
            },

            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            initTable(){
                //get方式不支持json数据
                var that=this;
                this.$http.post(`/lease/brand/getAllBrandPage/${this.currentPage}/${this.pageSize}`,this.roleFormData).then(function(resp){
                    that.tableData=resp.data.result.records;
                    that.total=resp.data.result.total;
                });
            },
            del(id){
                var that=this;
                var param={id:id};
                this.$http.delete("/lease/brand/delById",{params:param}).then(function (r) {
                        that.$message(r.data.message);
                        that.initTable();
                    }
                )
            },
            add(){
                this.dialogFormVisible = true;
                this.form={};
                this.imageUrlLog="";
                this.imageUrlBig="";
            },
            upda(data){
                this.dialogFormVisible = true;
                this.$nextTick(()=>{
                    this.$refs.form.resetFields();
                });
                var js= JSON.stringify(data);
                var da= JSON.parse(js);
                this.form = da;
                this.imageUrlLog=da.logo
                this.imageUrlBig=da.bigPic
            },
            addOrupda(){
                this.dialogFormVisible = false;
                this.form.logo=this.imageUrlLog;
                this.form.bigPic=this.imageUrlBig;
                var that=this;
                if (that.form.id){
                    this.$http.put("lease/brand/updateBrand",this.form).then(r=>{
                        that.$message(r.data.message);
                        that.initTable();
                    })
                } else if (!that.form.id){
                    this.$http.post("lease/brand/addBrand",this.form).then(r=>{
                        that.$message(r.data.message);
                        that.initTable();
                    })
                }

            },
            handleSizeChange(v){
                this.pageSize=v;
                this.initTable();
            },
            handleCurrentChange(v){
                this.currentPage=v;
                this.initTable();
            }
        }
    }
</script>

<style >
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>

